<template>
  <!--应收款分析-->
  <div className="com-threemoisten" ref="threemoistenRef" style="width: 50vw;height:308px;">

  </div>

</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      myChartname: null, // 图表对象
      standardsize: 1 // 全局标准值
    }
  },

  mounted () {
    // 挂载图标
    this.initChart()
    window.addEventListener('resize', this.screenAdapter)
    // 屏幕适配
    this.screenAdapter()
  },
  destroyed () {
    // 移除监听
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化图表
    initChart () {
      this.myChartname = echarts.init(this.$refs.threemoistenRef)
      // 图表基础配置
      var option = {
        title: {
          text: 'bar图'
        },
        legend: {
        // Try 'horizontal'
        orient: 'vertical',
        right: 10,
        top: 'center'
      },
        tooltip: {},
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
          // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          // 完成映射，参见后文。
          dimensions: ['product', '2015', '2016', '2017'],
          source: [
            { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
            { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
            { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
            { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
          ]
        },
        xAxis: {
          type: 'category',
          // data: ['衬衫', '羊毛衫', '雪纺衫']
          name: '种类',
          axisLine: {
            formatter: '{value} kg',
            align: 'center',
            lineStyle: {
              type: 'dashed'
           }
         }
        },
        yAxis: {
          name: '数量',
          axisLine: {
            length: 6,
            formatter: '{value} kg',
            align: 'center',
            lineStyle: {
              type: 'dashed'
           }
         }
        },
        series: [
          {
            showBackground: true,
            type: 'bar',
            // stack: 'x'//堆叠柱状图
            // name: '2015',
            // data: [89.3, 92.1, 94.4, 85.4]
          },
          {
            type: 'bar',
            // stack: 'x'
            // name: '2016',
            // data: [95.8, 89.4, 91.2, 76.9]
          },
          {
            type: 'bar',
            // stack: 'x'
            // name: '2017',
            // data: [97.7, 83.1, 92.5, 78.1]
          }
        ]
      }
      // 设置数据
      this.myChartname.setOption(option)
    },
    // 获取数据
    getData () {

    },
    // 更新图表
    updataChart () {
      // 设置请求的数据
      var upoption = {

      }
      this.myChartname.setOption(upoption)
    },
    // 屏幕适配
    screenAdapter () {
      this.standardsize = this.$refs.threemoistenRef.offsetWidth / 335
      const adapterOption = {}
      this.myChartname.setOption(adapterOption)
      // 手动调用图表对象resize
      this.myChartname.resize()
    }
  }

}
</script>
<style>
.com-threemoisten {
  background: #759aa0;
}
</style>